<template>
    <div class="box">
        <div class="header">首页</div>
        <div class="content">
            <!-- 1.商品轮播图 -->
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="item in bannerList" :key="item.bannerid">
                    <van-image :src="item.img" />
                </van-swipe-item>
            </van-swipe>
            <!-- 宫格列表 -->
            <van-grid :column-num="5" :border="false">
                <van-grid-item v-for="item in navList" :key="item.navid" :icon="item.imgurl" :text="item.title" />
            </van-grid>
            <!-- 商品列表 -->
            <van-pull-refresh v-model="refresh" @refresh="onRefresh">
                <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                    <ProList :list="proList" />
                </van-list>
            </van-pull-refresh>
            <!-- 回到顶部 -->
            <van-back-top right="4vw" bottom="9vh" offset="300" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { getBannerList, getNavList, getProList } from "@/api/home"
import { onMounted, ref } from "vue";
import type { Ref } from 'vue'
import ProList from '@/components/prolist.vue'
import { showToast } from 'vant';


//下拉刷新
const refresh = ref(false)
const count = ref(2)
async function onRefresh() {
    //请求数据
    const { data } = await getProList({ count: count.value })

    setTimeout(() => {
        if (!data.data.length) {
            refresh.value = false;
            return showToast('刷新失败')
        }

        proList.value = [...data.data]

        showToast('刷新成功');
        refresh.value = false;
        count.value++
        console.log(data);

    }, 1000);
}


//上拉加载新数据
const loading = ref(false)
const finished = ref(false)
const current = ref(1)    // 存储商品的当前页  
async function onLoad() {
    //请求数据
    const { data } = await getProList({ count: current.value })

    // 如果本次请求没有请求回来新数据, 那么结束上拉加载的功能
    if (!data.data.length) {
        return finished.value = true
    }

    proList.value = [...proList.value, ...data.data]

    // 请求完毕新数据, 将加载中的状态关闭
    loading.value = false

    // 请求完毕一次后, 更改当前的页码, 下一次请求的时候 会请求新的数据
    current.value++
}

// 存储轮播图数据
interface IBannerList {
    alt: string;
    bannerid: string;
    flag: boolean;
    img: string;
    link: string;
}
const bannerList: Ref<IBannerList[]> = ref([])

// 存储宫格列表数据
interface INavList {
    navid: number;
    imgurl: string;
    title: string;
}
const navList: Ref<INavList[]> = ref([])

// 存储商品列表数据
interface IProList {
    banners: string[];
    proid: string;
    category: string;
    brand: string;
    proname: string;
    originprice: number;
    sales: number;
    stock: number;
    desc: string;
    issale: number;
    isrecommend: number;
    discount: number;
    isseckill: number;
    img1: string;
    img2: string;
    img3: string;
    img4: string;
}
const proList: Ref<IProList[]> = ref([]);

onMounted(async () => {
    // 获取轮播图数据
    const { data } = await getBannerList()
    bannerList.value = data.data
    // console.log(bannerList.value);

    //获取宫格列表数据
    navList.value = getNavList()
    // console.log(navList);

    // 因为 我们 van-list 组件中的上拉加载功能会在页面刚打开的时候执行一次, 所以我们将 请求换一个地方书写
    // 获取商品列表
    // proList.value = (await getProList({})).data.data;
    // console.log(proList.value);
})
</script>

<style scoped>
/* .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
} */
.van-swipe {
    height: 1.6rem;

    .van-image {
        width: 100%;
        height: 100%;
    }
}
</style>